import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import { ElLoading } from 'element-plus'
interface requestInterface {
  requestInterceptor: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestInterceptorCatch: (error: any) => any
  responseInterceptor: (response: AxiosResponse) => AxiosResponse
  responseInterceptorCatch: (error: any) => any
}

interface requestConfig extends AxiosRequestConfig {
  interceptors?: requestInterface
  showLoading?: boolean
}
const defaultLoading = false
class axiosRequest {
  instance: AxiosInstance
  interceptors?: requestInterface
  showLoading?: boolean
  constructor(config: requestConfig) {
    // 创建axios实例
    this.instance = axios.create(config)
    this.showLoading = config.showLoading ?? defaultLoading
    this.interceptors = config.interceptors
    // 实例拦截器添加的拦截
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    ) //拦截器
    // 实例拦截器添加的拦截
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    ) //拦截器

    // 添加所有实例都有的拦截方法
    this.instance.interceptors.request.use(
      (config) => {
        if (this.showLoading) {
          ElLoading.service({
            lock: true,
            text: '数据加载中...',
            background: 'rgba(0, 0, 0, 0.5)'
          })
        }
        return config
      },
      (err) => {
        return err
      }
    )
    this.instance.interceptors.response.use(
      (res) => {
        if (res.status === 200) {
          setTimeout(() => {
            ElLoading.service().close()
          }, 3000)
        }
        return res.data
      },
      (err) => {
        if (err.response.status === 401) {
          // this.$message.error('Oops, this is a error message.')
        }
        return err
      }
    )
  }

  request(config: requestConfig) {
    return new Promise((resolve, reject) => {
      if (config.showLoading === false) {
        this.showLoading = false
      }
      if (config.interceptors?.requestInterceptor) {
        config = config.interceptors.requestInterceptor(config)
      }
      this.instance
        .request(config)
        .then((res) => {
          if (config.interceptors?.responseInterceptor) {
            config = config.interceptors.responseInterceptor(res)
          }

          resolve(res)
          // 将loading设置为true,这样不会影响下一个请求
          this.showLoading = defaultLoading
        })
        .catch((err) => {
          this.showLoading = defaultLoading
          reject(err)
        })
    })
  }
  get(config: requestConfig) {
    return this.request({ ...config, method: 'get' })
  }
  post(config: requestConfig) {
    return this.request({ ...config, method: 'post' })
  }
  delete(config: requestConfig) {
    return this.request({ ...config, method: 'delete' })
  }
}

const request = new axiosRequest({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 10000
  // interceptors: {
  //   requestInterceptor: (config: AxiosRequestConfig) => {
  //     return config
  //   },
  //   requestInterceptorCatch: (error: any) => {
  //     return Promise.reject(error)
  //   },
  //   responseInterceptor: (response: AxiosResponse) => {
  //     return response
  //   },
  //   responseInterceptorCatch: (error: any) => {
  //     return Promise.reject(error)
  //   }
  // }
})
export default request
